<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="utf-8">
		<title>访客登记审核提醒详情</title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<th:block th:include="include :: header('身份认证')" />
	</head>
	<body>
		<div class="box-card">
<!--			<div class="row-box" style="padding: 20px 50px; justify-content: space-between;">-->
<!--				<div class="top-title1"> 邀约登记（欧乐乐）/ 访客登记</div>-->
<!--				<div class="top-title2"> 审核人：欧乐</div>-->
<!--			</div>-->
			<input id="id" name="id" th:field="*{id}" type="hidden">
			<input id="userId" name="userId" th:field="*{userId}" type="hidden">
			<input id="userType" name="userType" th:field="*{userType}" type="hidden">

			<div class="row-box">
				<div class="title">称呼</div>
				<div class="name" th:text="${name}"></div>
			</div>
			<div class="row-box">
				<div class="title">电话</div>
				<div class="name" th:text="${mobile}"></div>
			</div>
			<div class="row-box">
				<div class="title">来访地点</div>
				<div class="name" th:text="${address}"></div>
			</div>
			<div class="row-box" style="border: none;padding-bottom: 10px;">
				<div class="title">来访事由</div>
				<div class="name" th:text="${reason}">访友</div>
			</div>
			<div class="row-box" style="border: none;padding-bottom: 10px;">
				<div class="title">所属单位</div>
				<div class="name" th:text="${department}">青岛嘉业有限公司</div>
			</div>
			<div class="row-box" style="border: none;padding-bottom: 10px;">
				<div class="title">备注消息</div>
				<div class="name" th:text="${remark}">找人事</div>
			</div>
			<div class="row-box" style="border: none;padding-bottom: 10px;">
				<div class="title">来访类型</div>
				<div class="name" th:text="${type}">单次来访</div>
			</div>
			<div class="row-box" style="border: none;padding-bottom: 10px;">
				<div class="title">历史来访</div>
				<div class="name" th:text="${regHis}">12次</div>
			</div>
			<div class="row-flex">
				<div class="tags" id="tags"></div>
			</div>
		</div>
		<div class="footer">
			<div class="footer1" id="footer1">
				<div class="accept" onclick="accept()">审核通过</div>
			</div>
		</div>
		<th:block th:include="include :: footer" />
		<script th:inline="javascript">
			// 1、获取当前详情页面的信息 TODO
			// 违规标签显示
			var prefix = ctx + "djb/user";
			var tagsName = ['首次来访', '停车', '蛮横无理']
			const tagsContainer = document.getElementById('tags')
			tagsName.forEach(tagText => {
				// 创建一个新的div元素作为标签
				const tagElement = document.createElement('div')
				tagElement.classList.add('tag'); // 添加样式类
				tagElement.textContent = tagText; // 设置标签文本
				// 将标签元素添加到 #tags 容器中
				tagsContainer.appendChild(tagElement);
			})
			// 审核通过按钮
			function accept() {
				let id=$("#id").val();
				let userType=$("#userType").val();
				let userId=$("#userId").val();
				$.operate.get(prefix + "/ExamRegistry/"+id+"/"+userType+"/"+userId);
			}
		</script>
	</body>
</html>

<style>
	body {
		background-color: #f4f4f4;
		padding: 50px 20px;
	}

	.box-card {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px 0;
	}

	.row-box {
		display: flex;
	}

	.title {
		font-family: PingFang SC;
		color: #999999;
		font-weight: bold;
		font-size: 30px;
		padding: 36px 50px;
		width: 260px;
	}

	.name {
		display: flex;
		justify-content: flex-end;
		float: right;
		color: #333333 font-family: PingFang SC;
		font-weight: bold;
		font-size: 30px;
		padding: 36px 50px;
	}

	.footer {
		position: absolute;
		bottom: 30px;
		width: 96%;
	}

	.footer-left {
		width: 341px;
		height: 100px;
		background: #F4F4F4;
		border-radius: 10px;
		border: 1px solid #D22323;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 40px;
		color: #D22323;
	}

	.footer-right {
		width: 100%;
		height: 100px;
		background: #319BD5;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 40px;
		color: #FFFFFF;
	}

	.row-flex {
		display: flex;
		align-items: center;
		padding: 20px 40px;
	}

	.tags {
		display: flex;
		align-items: center;
		height: 25px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26px;
		color: #999999;
		line-height: 44px;
	}

	.tag {
		padding: 5px 10px;
		background-color: #f0f0f0;
		border-radius: 10px;
		margin-right: 40px;
		;
	}

	.top-title1 {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36px;
		color: #333333;
		line-height: 44px;
	}

	.top-title2 {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26px;
		color: #999999;
		line-height: 44px;
	}

	.error {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30px;
		color: #319BD5;
		line-height: 44px;
		display: flex;
		justify-content: center;
		margin: 48px 0;
	}

	.footer1 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 96px;
		background: #ACD598;
		border-radius: 10px;
		margin-bottom: 35px;
	}

	.accept {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40px;
		color: #FFFFFF;
	}

	.footer2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.reject {
		width: 270px;
		height: 96px;
		background: #D74E4E;
		border-radius: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.discharged {
		width: 420px;
		height: 96px;
		background: #319BD5;
		border-radius: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer3 {
		color: #fff;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40px;
		margin-top: 30px;
	}

	.footer-top,
	.footer-bottom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #DDDDDD;
		border-radius: 10px;
		height: 96px;
		margin-bottom: 20px;
	}
</style>